<template>
  <div :class="$style.evaluate">
    <Button type="text" @click="openClickHandle">评分</Button>
    <el-dialog :visible.sync="visible" title="评分" :close-on-click-modal="false" @open="openHandle">
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="companyScore" label="分数">
            <el-input v-model="formData.companyScore" v-number-input placeholder="请输入分数" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="visible=false">取消</Button>
            <Button type="primary" @click="confirmHandle">确定</Button>
          </el-form-item>
        </el-form>

      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { companyAppraise } from '@/api/serviceQuality'
export default {
  name: 'Evaluate',
  components: {
    FormContainer
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    const validatorScore = (r, v, c) => {
      if (v > 5 || v < 1) {
        c(new Error('分数为1-5'))
      } else {
        c()
      }
    }
    return {
      visible: false,
      formData: {
        companyScore: '',
        id: ''
      },
      formRules: {
        companyScore: [{ required: true, message: '请输入分数', trigger: 'chenge' },
          { required: true, validator: validatorScore, trigger: 'change' }]
      }
    }
  },
  methods: {
    openHandle() {
      this.$set(this.formData, 'id', this.id)
    },
    openClickHandle() {
      this.visible = true
    },
    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        return companyAppraise(this.formData).then(res => {
          this.$message.success('评分成功！')
          this.$emit('refresh')
          this.visible = false
        })
      })
    }
  }
}
</script>
<style lang="scss" module>
.evaluate{
  display: inline-block;
  text-align: left;
}
</style>
